<template>
  <div>
    <div class="top_box">
      <div class="top_img">
        <img v-if="backgroundUrl" class="show_img" :src="backgroundUrl" alt="">
        <img class="move_img" :class="showImg ? 'move_img_show' : ''" :style="{top: top + 'px','left': left + 'px'}" :src="moveUrl" alt="">
      </div>
      <div class="top_btn">
        <div v-if="!isEnd" class="top_btn_text">
          拖动滑块完成拼图
        </div>
        <div v-if="!isEnd" class="top_move_res" :style="{width: (left + 50) + 'px'}" />
        <div v-if="!isEnd" class="top_btn_button" :style="{'left': left + 'px'}" @mousedown.stop="envir === 'pc' ? mousedown($event) : ''" @touchstart.stop.passive="envir === 'pc' ? '' : touchdown($event)">
          <i class="el-icon-s-grid" style="font-size: 24px;" />
        </div>
        <div v-if="isEnd" class="top_btn_text top_result_box">
          <i class="el-icon-success" />
          验证完成！
        </div>
      </div>
    </div>
    <div class="btn_box">
      <i class="move_icon el-icon-circle-close" @click="$emit('close')" />
      <i class="move_icon el-icon-refresh-left" @click="refresh" />
    </div>
  </div>
</template>

<script>
import {
  api_GET_Check,
  api_GET_GraphicVerify
} from '@/extend/api/platform/register';
// import { getTenantId } from '@/lib/auth';
export default {
  props: {
    envir: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      backgroundUrl: '',
      moveUrl: '',
      showImg: false,
      top: 0,
      left: 0,
      isDown: false,
      start: 0,
      isEnd: false,
      ClientId: 'Taekwondo_App ' + new Date().getTime()
    };
  },
  mounted() {
    // this.getData();
    // 检测是否为手机端
    // if (navigator.userAgent.match(/(phone|iPhone|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    //   this.envir = 'mobile';
    // } else {
    //   this.envir = 'pc';
    // }
  },
  methods: {
    mousedown(e) {
      this.isDown = true;
      this.start = this.left ? e.x - this.left : e.x;
      this.showImg = true;
      document.onmousemove = ev => {
        const events = ev || window.event;
        if (this.isDown) {
          const _move = events.x - this.start;
          this.left = _move <= 0 ? 0 : _move >= 260 ? 260 : _move;
        }
      };
      document.onmouseup = ev => {
        // const events = ev || window.event;
        if (this.isDown) {
          this.isEnd = true;
          document.onmousemove = null;
          document.onmouseup = null;
        }
        this.isDown = false;
        this.verifiCode();
      };
    },
    // 触控
    touchdown(e) {
      console.log('touchstart');
      this.isDown = true;
      console.log(e);
      this.start = this.left
        ? e.changedTouches[0].clientX - this.left
        : e.changedTouches[0].clientX;
      this.showImg = true;
      document.ontouchmove = ev => {
        const events = ev || window.event;
        if (this.isDown) {
          const _move = events.changedTouches[0].clientX - this.start;
          this.left = _move <= 0 ? 0 : _move >= 260 ? 260 : _move;
        }
      };
      document.ontouchend = ev => {
        // const events = ev || window.event;
        if (this.isDown) {
          this.isEnd = true;
          document.ontouchmove = null;
          document.ontouchend = null;
        }
        this.isDown = false;
        this.verifiCode();
      };
    },
    // 刷新
    refresh() {
      this.isDown = false;
      this.showImg = false;
      this.backgroundUrl = '';
      this.moveUrl = '';
      this.left = 0;
      this.getData();
      this.isEnd = false;
    },
    // 获取数据
    getData() {
      const _data = {
        ClientId: this.ClientId
      };
      api_GET_GraphicVerify(_data).then(res => {
        if (res && res.backgroundImage) {
          this.backgroundUrl = 'data:image/png;base64, ' + res.backgroundImage;
          this.moveUrl = 'data:image/png;base64, ' + res.moveableImage;
          this.top = res.positionY;
        } else {
          this.refresh();
        }
      });
    },
    // 验证验证码
    verifiCode() {
      const datas = {
        ClientId: this.ClientId,
        Verification: this.left / 300
      };
      api_GET_Check(datas).then(res => {
        if (res.code === 'success') {
          setTimeout(() => {
            this.$emit('success', datas);
            this.$emit('close');
          }, 500);
        } else if (res.code === 'failed') {
          this.$message.error('验证失败！' + res.errorMsg);
          this.left = 0;
          this.isEnd = false;
        } else {
          this.$message.error('验证失败！' + res.errorMsg);
          this.refresh();
        }
      });
    }
  }
};
</script>

<style scoped>
.top_box {
  padding: 10px;
}
.top_img {
  position: relative;
  height: 150px;
  width: 300px;
  margin-bottom: 10px;
}
.show_img {
  height: 100%;
  width: 100%;
}
.move_img {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: none;
  box-shadow: 0 0 6px #272727;
}
.move_img_show {
  display: block;
}
.top_btn {
  padding: 5px 0;
  position: relative;
}
.top_btn_text {
  height: 40px;
  font-size: 20px;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  background-color: #ebeef5;
  color: #909399;
}
.top_move_res {
  position: absolute;
  top: 0;
  top: 5px;
  height: 40px;
  border-radius: 25px;
  z-index: 3;
  background-color: rgba(7,49,144,0.5);
}
.top_btn_button {
  position: absolute;
  top: 0;
  height: 50px;
  width: 50px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background-color: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
}
.btn_box {
  padding: 10px;
  border-top: 1px solid #ddd;
}
.move_icon {
  font-size: 26px;
  color: #888;
  margin-right: 20px;
  cursor: pointer;
}
.top_result_box {
  color: #fff;
  background-color: #67c23a;
}
</style>
